<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="userErrorTpl">
      <input nz-input formControlName="userName" placeholder="姓名" />
      <ng-template #userErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入您的姓名
        </ng-container>
        <ng-container *ngIf="control.hasError('duplicated')">
          The username is redundant!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>账号</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="验证中 ..." nzErrorTip="请输入你的账号">
      <input nz-input formControlName="number" placeholder="账号" />
      <ng-template #userErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入你的账号
        </ng-container>
        <ng-container *ngIf="control.hasError('duplicated')">
          The username is redundant!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="请输入你的密码">
      <input nz-input type="password" placeholder="密码" formControlName="password"
        (ngModelChange)="validateConfirmPassword()" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>确认密码</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="密码不一致">
      <input nz-input type="password" formControlName="confirm" placeholder="确认密码" />
      <ng-template #passwordErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请确认你的密码
        </ng-container>
        <ng-container *ngIf="control.hasError('confirm')">
          密码不一致
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>状态</nz-form-label>
    <app-radio #radio></app-radio>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzOffset]="7" [nzSpan]="12">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid"
        (click)="addOrEditUser($event)">{{buttonName}}</button>
      <button nz-button (click)="resetForm($event)">清空内容</button>
    </nz-form-control>
  </nz-form-item>
</form>